<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="util.*"%>
<%@page import="dal.*,bll.*"%>
<%@ page import="model.*,java.util.*"%>

<%
	int idProject = MiscUtil.getIntUrlParam(request, "idProject");
	ProjectModel project = CommonBll.loadProjectWithPhases(idProject);

	boolean embedded = MiscUtil.getBoolUrlParam(request, "embedded", false);

	StyleInfo style = new StyleInfo();

	// TODO : set specific styles

	style.setCellMonthStyle("tdMonth");
	style.setCellDayStyle("tdDay");
	style.setCellDayTodayStyle("tdDayToday");

	style.setCellHeaderStyle("tdHeader");

	style.setCellPhaseStyle("tdPhase");
	style.setCellPhaseTodayStyle("tdPhaseToday");
	
	style.setCellStyle("tdCell");

	style.setCellTaskStyle("tdTask");
	style.setCellTaskTodayStyle("tdTaskToday");	

	style.setMondayStyle("");
	style.setTuesdayStyle("");
	style.setWednesdayStyle("");
	style.setThursdayStyle("");
	style.setFridayStyle("");
	style.setSaturdayStyle("tdSaturday");
	style.setSundayStyle("tdSunday");

	project.setStyleInfo(style);

	String[] trStyles = new String[] { "style=\"font-weight: bold; font-size:110%; \"", "style=\"font-weight: bold;\"", "", "", "", "" };
// 	background-color: #E8E8E8; background:url(image/phase_light_green.gif) repeat-x left center;
	String[] tdStyles = new String[] { "style=\"padding-left: 10px; \"", "style=\"padding-left: 20px;\"", "style=\"padding-left: 30px;\"", "style=\"padding-left: 40px; font-style: italic; \"", "style=\"padding-left: 50px; font-style: italic; \"" };
// 	background:url(image/phase_light_green.gif) repeat-x left center;
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Project - <%=project.getName()%></title>

<script type="text/javascript">
	function togglePhase(phase, tasks) {
		
		alert(tasks);		
		
		// TODO phase = idPhase
		// change icon of phase
		
		// TODO task = array of id task
		// toggle rows of tasks
	}
</script>

<style type="text/css">
html,body {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	margin: 0;
	padding: 0;
}

.tdTask {
	background-color: red;
}

.tdMonth {
	text-align: center;
	border-collapse: collapse;
	border: 1px solid #e6e6e6;
}

.tdDay {
	text-align: center;
	width: 28px;
	border-collapse: collapse;
	border: 1px solid #e6e6e6;
}

.tblPhase {
	border-collapse: collapse;
	border: 1px solid #e6e6e6;
}

.tdCell {
	border-collapse: collapse;
	border: 1px solid #e6e6e6;
	width: 28px;
}

.tdPhase {
	border-collapse: collapse;
	border: 1px solid #e6e6e6;
	background: url(image/phase_light_blue.gif) repeat-x left center;
}

.tdHeader {
	border-collapse: collapse;
	border: 1px solid #e6e6e6;
	background: url(image/phase_header_bg.gif) repeat-x left center;
}

.tblPhase td {	
	height: 28px;
	vertical-align: middle;
}

.trPhase {
/* 	background: url(image/phase_light_blue.gif) repeat-x left center; */
}

.trHeader {
/* 	background: url(image/phase_header_bg.gif) repeat-x left center; */
}

/* .tdPhase { */
/* 	width: 28px; */
/* } */

/* .tdPhase { */
/* 	width: 28px; */
/* } */

.expandButton {
	width: 20px;
	background: url(image/ico_right_arrow.gif) no-repeat left center;
}

.tdDefault {
	border-collapse: collapse;
	border: 1px solid #e6e6e6;
}

</style>

</head>
<body>
	<table class="tblPhase">
		<tr>
			<td class="tdDefault" colspan="3"></td>
<!-- 			<td class="tdCell"></td> -->
<!-- 			<td class="tdCell"></td> -->
			<%=HtmlUtil.genCalendarMonthHeader(project)%>
		</tr>
		<tr>
			<td class="tdDefault" colspan="3"></td>
<!-- 			<td class="tdCell"></td> -->
<!-- 			<td class="tdCell"></td> -->
			<%=HtmlUtil.genCalendarDayHeader(project)%>
		</tr>
		<tr class="trHeader">
			<td class="tdHeader"></td>
			<td class="tdHeader"></td>
			<td class="tdHeader"></td>
			<%=HtmlUtil.genHeaderRow(project)%>
		</tr>
		<%
			List<PhaseModel> phases = project.getPhases();
			for (int i = 0; i < phases.size(); i++) {
				PhaseModel phase = phases.get(i);
				List<ChecklistItemModel> tasks = phase.getChecklistItems();
				System.out.println(tasks.size());
		%>

		<tr class="trPhase" id="tr_phase_<%=phase.getId()%>"
			style="cursor: pointer;"
			onclick="togglePhase('<%=phase.getId()%>', <%=JavascriptUtil.<ChecklistItemModel> genJavascriptIdArray(tasks)%>)">
			<td class="tdCell"></td>
			<td class="tdCell"></td>
			<td class="tdPhase"><span id="span_<%=phase.getId()%>" class="expandButton">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<span> <%=phase.getName()%> - <%=phase.getDescriptionToString()%>
			</span>
			</td>
			<%=HtmlUtil.genPhaseRow(project)%>
		</tr>
		<%
			for (int j = 0; j < tasks.size(); j++) {
					ChecklistItemModel task = tasks.get(j);
		%>
		<tr id="tr_task_<%=task.getId()%>" <%=trStyles[task.getLevel()]%>>
			<td class="tdCell"></td>
			<td class="tdCell"></td>
			<td  class="tdDefault" <%=tdStyles[task.getLevel()]%>>
				<%
					if (task.getLevel() == 0) {
				%> <span class="expandButton">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
				<%
					}
				%> <%=task.getName()%></td>
			<%=HtmlUtil.genTaskRow(project, task)%>
		</tr>
		<%
			}
		%>
		<%
			}
		%>

	</table>
</body>
</html>